<template>
  <view class="order-record-page">
    <view class="title">订单记录</view>
    <view class="timeline">
      <!-- 这里展示订单状态的时间线 -->
      <view class="timeline-item" v-for="(status, index) in orderStatus" :key="index">
        <view class="timeline-icon"></view>
        <view class="timeline-content">
          <view class="status">{{ status.name }}</view>
          <view class="time">{{ status.time }}</view>
          <view class="desc">{{ status.desc }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: null, // 订单ID
      orderStatus: [
        { name: '王大壮师傅已接单', time: '2023-12-25 08:26', desc: '师傅即将上门服务，请您耐心等待' },
        { name: '等待接单中…', time: '2023-12-25 08:26', desc: '请您耐心等待，我们尽快催促师傅接单' },
        { name: '订单已生成', time: '2023-12-25 08:26', desc: '请您耐心等待，我们尽快催促师傅接单' }
      ]
    };
  },
  onLoad(options) {
    // 获取传递过来的订单ID
    this.orderId = options.orderId;
    console.log("订单ID: ", this.orderId);
    // 你可以根据 orderId 调用 API 获取具体订单的状态信息
  }
}
</script>

<style scoped>
.order-record-page {
  padding: 16px;
}

.title {
  font-size: 20px;
  margin-bottom: 20px;
}

.timeline {
  padding: 20px;
}

.timeline-item {
  display: flex;
  margin-bottom: 20px;
  position: relative;
}

.timeline-icon {
  width: 12px;
  height: 12px;
  background-color: #007aff;
  border-radius: 50%;
  position: absolute;
  left: -6px;
  top: 10px;
}

.timeline-content {
  margin-left: 30px;
}

.status {
  font-size: 16px;
  font-weight: bold;
}

.time {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.desc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
</style>
